<template>
  <div style="height: 85vh; box-shadow: var(--el-border-color-light) 0px 0px 10px">
    <el-row class="rowNavStyle">
      <el-col :span="24" class="colNavStyle">
        <div style="margin-left: 10px">
          标题：<el-input
            v-model="queryWhere.ApplyTitle"
            style="width: 240px"
            maxlength="20"
            clearable
            placeholder="请输入申请标题"
          />
        </div>
        <div style="margin-left: 10px">
          流程状态：
          <el-select
            clearable
            style="width: 150px"
            v-model="queryWhere.FlowApplyState"
            placeholder="请选流程状态"
          >
            <el-option
              v-for="item in flowApplyStateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </div>
        <div>
          申请日期：
          <el-date-picker
            v-model="queryWhere.CreateTime"
            type="daterange"
            range-separator="到"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>

        <el-button
          style="margin-left: 10px"
          icon="Search"
          type="primary"
          @click="searchClick"
          >查询</el-button
        >
        <!-- <menuButton
          @addFlowApplyKey="addFlowApplyClick"
          helper-path="pages/aae246"
        ></menuButton> -->
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      stripe
      :border="true"
      row-key="FlowApplyId"
      @selection-change="SelectionChange"
      default-expand-all
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" />

      <!-- 动态列 -->
      <el-table-column
        show-overflow-tooltip
        v-for="itme in columns"
        :key="itme.FieldEnName"
        :prop="itme.FieldEnName"
        :label="itme.FieldCnName"
        :min-width="itme.FieldWidth"
        :sortable="itme.FieldSortable"
        :align="itme.FieldAlign"
        :fixed="itme.FieldFixed === '' ? false : itme.FieldFixed"
      >
        <template v-if="itme.FieldSlot === 'DataState'" #default="DataState">
          <el-tag type="success" v-if="DataState.row.DataState === DataStateEnum.Enable"
            >启用中</el-tag
          >
          <el-tag type="warning" v-if="DataState.row.DataState === DataStateEnum.Stop"
            >关闭中</el-tag
          >
          <el-tag type="danger" v-if="DataState.row.DataState === DataStateEnum.Delete"
            >已删除</el-tag
          >
        </template>
        <template v-if="itme.FieldSlot === 'FlowApplyState'" #default="FlowApplyState">
          <el-tag
            color="#31bdec"
            v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.InExamine"
            ><span style="color: white">审核中</span></el-tag
          >
          <el-tag
            color="#16b777"
            v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.AuditPass"
            ><span style="color: white">审核通过</span></el-tag
          >
          <el-tag
            color="red"
            v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.AuditRefuse"
            ><span style="color: white">审核拒绝</span></el-tag
          >
          <el-tag
            color="#ffb800"
            v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.AuditDismissal"
            ><span style="color: white">审核驳回</span></el-tag
          >
          <el-tag
            color="#F56C6C"
            v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.Cancel"
            ><span style="color: white">作废</span></el-tag
          >
          <el-tag
            color="#67C23A"
            v-if="FlowApplyState.row.FlowApplyState === FlowApplyStateEnum.Filing"
            ><span style="color: white">归档</span></el-tag
          >
        </template>
        <template v-if="itme.FieldSlot === 'UrgentIndex'" #default="UrgentIndex">
          <el-rate v-model="UrgentIndex.row.UrgentIndex" disabled style="height: 10px" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" fixed="right">
        <template #default="scope">
          <dataRowButton
            :model="scope.row"
            @approvalFlowKey="approvalFlowClick"
            @carbonCopyKey="carbonCopyClick"
            :key="updateKey"
          ></dataRowButton>
        </template>
      </el-table-column>
    </el-table>

    <pageLayout :pageData="page" @pageBnt="pageClick"></pageLayout>
  </div>
  <auditFlow
    :is-visibles="approvalFlowModel.isVisibles"
    :dialogTitle="approvalFlowModel.dialogTitle"
    :flowApplyId="approvalFlowModel.flowApplyId"
    :currentNodeId="approvalFlowModel.currentNodeId"
    @closeBnt="colosClick"
    ref="auditFlowRef"
  >
  </auditFlow>
  <departmentUser
    :is-visibles="departmentUserModel.isVisibles"
    :data-id="departmentUserModel.flowApplyId"
    @closeBnt="colosClick"
    @confirmBnt="confirmClick"
  ></departmentUser>
</template>
<script lang="ts" setup>
import pageLayout from "@/components/page.vue";
import { onMounted, reactive, ref } from "vue";
import { basePageModel, pageCofing } from "@/model/public/public";
import dataRowButton from "@/components/dataRowButton.vue";
import { GetMenuColsByMenuId } from "@/api/publicTool";
import { DataStateEnum } from "@/enum/public";
import { ElMessage } from "element-plus";
import { FlowOutPut } from "@/model/flow";
import { GetWaitApprovalFlow, InsertMessage } from "@/api/flowApply";
import auditFlow from "@/views/flowApproval/waitApproval/auditFlow.vue";
import "@/iconfont/iconfont";
import "../../../iconfont/iconfont.css";
import { FlowApplyInput } from "@/model/flowApply";
import { getFlowApplyStateList } from "@/api/public";
import { selectOutPut } from "@/model/public/selectModel";
import { FlowApplyStateEnum } from "@/enum/flowEnum";
import { treeOutPut } from "@/model/public/treeModel";
import { MessageTypeEnum } from "@/enum/flowMessageEnum";
import departmentUser from "@/components/departmentUser.vue";
//初始加载dom
onMounted(() => {
  GetMenuColsByMenuIdMsg();
  getFlowApplyStateListMsg();
});

//table数据
const tableData = ref<FlowOutPut[]>([]);
//更新key，刷新dom使用
const updateKey = ref(0);
// 选中项
const selectedRows = ref<FlowOutPut[]>([]);
//加载状态
const loading = ref(true);
//流程申请状态
const flowApplyStateList = ref<selectOutPut[]>([]);

//流程进度模型
const approvalFlowModel = reactive({
  isVisibles: false,
  dialogTitle: "",
  flowApplyId: "",
  currentNodeId: "",
});

//部门人员模型
const departmentUserModel = reactive({
  isVisibles: false,
  flowApplyId: "",
});

//分页
const page = reactive<basePageModel>({
  currentPage: pageCofing.currentPage,
  pageSize: pageCofing.pageSize,
  total: pageCofing.total,
});

//查询条件
const queryWhere = ref<FlowApplyInput>({
  currentPage: pageCofing.currentPage,
  pageSize: pageCofing.pageSize,
  total: pageCofing.total,
  ApplyTitle: "",
  FlowApplyState: undefined,
  CreateTime: "",
  CreateTimeStart: undefined,
  CreateTimeEnd: undefined,
});

//获取等待审批流程
const GetWaitApprovalFlowMsg = async () => {
  GetWaitApprovalFlow(queryWhere.value)
    .then(({ data, code, total, msg }) => {
      if (code == 200) {
        tableData.value = data;
        page.total = total;
      } else {
        ElMessage.warning(msg);
      }
      loading.value = false;
      updateKey.value++;
    })
    .catch((_res) => {
      loading.value = false;
    });
};

//获取流程申请状态
const getFlowApplyStateListMsg = function () {
  flowApplyStateList.value = [];
  getFlowApplyStateList().then(({ data, code, msg }) => {
    if (code == 200) {
      flowApplyStateList.value = data;
    } else {
      ElMessage.warning(msg);
    }
  });
};

//查询事件
const searchClick = function () {
  GetWaitApprovalFlowMsg();
};

//分页点击事件
const pageClick = function (basePageModel: basePageModel) {
  page.currentPage = basePageModel.currentPage;
  page.pageSize = basePageModel.pageSize;
  GetWaitApprovalFlowMsg();
};

//定义列
const columns = ref<any>([]);

//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 0) {
    GetWaitApprovalFlowMsg();
  } else {
    loading.value = false;
    columns.value = [];
  }
};

//审批流程事件
const approvalFlowClick = function (row: any) {
  approvalFlowModel.isVisibles = true;
  approvalFlowModel.dialogTitle = "流程审批";
  approvalFlowModel.flowApplyId = row.FlowApplyId;
  approvalFlowModel.currentNodeId = row.CurrentNodeId;
};

//抄送事件
const carbonCopyClick = (row: any) => {
  departmentUserModel.isVisibles = true;
  departmentUserModel.flowApplyId = row.FlowApplyId;
};

//抄送事件确认
const confirmClick = function (model: treeOutPut[]) {
  if (model.length > 0) {
    InsertMessage({
      flowApplyId: departmentUserModel.flowApplyId,
      recipientKeys: model.map((f) => f.key).join(","),
      messageType: MessageTypeEnum.CarbonCopy,
    }).then(({ code }) => {
      if (code == 200) {
        departmentUserModel.isVisibles = false;
        departmentUserModel.flowApplyId = "";
        GetWaitApprovalFlowMsg();
        ElMessage.success("抄送成功");
      }
    });
  } else ElMessage.warning("请选择抄送人");
};

//复选框事件
const SelectionChange = (val: FlowOutPut[]) => {
  selectedRows.value = val;
};

//关闭弹出层
const colosClick = function () {
  approvalFlowModel.isVisibles = false;
  departmentUserModel.isVisibles = false;
  departmentUserModel.flowApplyId = "";
  GetWaitApprovalFlowMsg();
};
</script>

<style scoped>
.main-panel {
  height: 100%;
}
.tree-item {
  min-width: max-content;
  display: flex;
}
</style>
